<template>
  <div class="app-container">
    <el-row type="flex" align="center" :gutter="20">
      <el-form class="filterData-block" label-position="left" :inline="true" label-width="auto">
        <el-form-item label="关键字:">
          <el-input
            placeholder="名称 | 关键字"
            v-model="filterText"
            maxlength="20"
            size="small"
            clearable
          >
          </el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-top: 20px">
      <div class="custom-tree-container" v-loading="placeTypeLoading" >
        <div class="block">
          <p>行业分类列表</p>
          <el-tree
            :data="data"
            node-key="id"
            ref="tree"
            default-expand-all
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            :props="{children: 'subLevelModelList'}">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.jobTitle }}</span>
        <span>
           <el-button
             type="text"
             size="mini"
             @click="() => update(node, data)">
            修改
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
          </el-tree>
        </div>
      </div>
    </el-row>
    <el-dialog width="50%"  v-if="visible[0]" :visible.sync="visible[0]" title="编辑" :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true"
    >
      <PositionDetail ref="detail" :id="detailId" :closeDialog="closeDialog"></PositionDetail>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="visible[0] = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.detail.submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PositionDetail from '@/components/Position/Detail'
import {getList,toExamineUserApi} from '@/api/personnelCode'
import {addFindJobNameApi, deleteFindJobNameApi, getFindJobNameListApi} from "@/api/companyCode";

export default {

  components: { PositionDetail },
  data() {
    return {
      data: [],
      filterText: '',
      tableData: [],
      tableConf: {
        page: 1,
        sizes: [10, 20, 50, 100],
        total: 0,
        size: 10,
        loading: false
      },
      visible: {//控制弹窗显示
        0: false
      },
      detailId: null,
      keyword: '',//关键字查询
      filterData: {
        keyword: ''

      },
      placeTypeLoading: true,

    }

  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.getFindJobNameList()
  },
  methods: {
    downloadCode(url) {
      window.open(url)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.subLevelModelList || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      deleteFindJobNameApi({
        id: data.id,
      }).then((res) => {
        this.$message.success('操作成功');

      }).catch(() => {
        this.$message.error('操作失败');
      })


    },
    update(node, data)
    {
     this.openDetail(data.id);

    },
    getFindJobNameList() {
      getFindJobNameListApi().then((res) => {
        this.data = res
        this.data=JSON.parse(JSON.stringify(this.data))
      }).finally(() => {
        this.placeTypeLoading = false
      })
    },

    //打开添加/编辑页
    openDetail(id = null) {
      this.detailId = id
      this.visible[0] = true
    },
    //关闭指定弹窗并刷新页面
    closeDialog(index) {
      this.visible[index] = false
      this.getTableList()
    },

    refreshTable() {
      this.tableConf.page = 1
      this.getTableList()
    }
  }
}
</script>
<style lang="scss" scoped>
.filterData-block {
  .el-form-item {
    margin-bottom: 0;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
